<template>
  <!-- 这是积分商品的参与记录 -->
  <div id="record">
    <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
        <div class="tableList">
          <h4>我的积分：{{userInfo.credit1 || "0"}}分</h4>
          <table border="1" cellpadding='0' cellspacing='0' width='100%'>
            <tr>
              <td width='600px'>商品名称</td>
              <td>兑换积分</td>
            </tr>
            <tr v-for="data in tableData" :key="data.id" @click="pointsOrder">
              <td>
                <div class="tdImg"><img :src="url+data.thumb" alt=""></div>
                <div class="tdText"><p>{{data.address}}</p><p>{{data.title}}</p></div>
              </td>
              <td>
                <p>- {{data.credit}} 积分</p>
                <p>{{data.Converted}}</p>
              </td>
            </tr>
          </table>
        </div>
        <!-- 分页组件 -->
        <!-- <paging :obj='pageObj' @page='child' v-if="pagingBool"></paging> -->
      </el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
// import paging from "@/components/Paging.vue";
export default {
  data () {
    return {
      // pagingBool: false,
      userInfo: {
        nickname: "", // 名称
        headimgurl: "", // 头像
        credit1: "" //积分
      },

      tableData: [],
      url: "https://mp.uekea.cn/attachment/",
      openid: this.$Cookie.getCookie("userID"),  //微信openid
    }
  },
  components: {
    Header,
    Footer
    // paging
  },
  computed: {
    noMore () {
      return this.count >= 20
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    // 分页传过来的数据
    // child(i) {
    //   this.renderArray(i);
    // },
    // load () {
    //   this.loading = true
    //   setTimeout(() => {
    //     this.count += 2;
    //     this.loading = false;
    //   }, 2000)
    // },
    // 跳转到积分订单兑换记录
    pointsOrder() {
      this.$router.push({"path": "/accountInformation/pointsOrder"});
    }
  },
  created () {
    var _this = this;
    let id = _this.$Cookie.getCookie("userID");
    if (_this.$Cookie.getCookie("token") != undefined) {
      // 请求用户数据
      _this.$get(`user/info/${id}`).then((res) => {
        console.log(res)
        if (res.code == 200) {
          _this.userInfo = res.data;
          _this.imageUrl = res.data.avatar;
        }
      });

      //请求全部兑换数据
      _this.$get(`integral/order/list/${_this.openid}`).then((res) => {
        console.log(res)
        if (res.code == 200) {
          _this.tableData = res.data;
        }
      });
    } else {
      // 没token值
      _this.$MessageAlert(true, _this.$t("share.Message.login"), "error");
      _this.$router.push({ path: "/" });
    }

  }
}
</script>

<style lang='less' scoped>
// 布局容器
.el-header {
  font-size: 0;
}
.el-header, .el-footer {
  color: #333;
  text-align: center;
  height: auto!important;
  padding: 0px;
}
.el-main {
  // width: 1150px;
  color: #333;    
  padding: 0px;
  // 计算减去头部和底部的高度，就是中间的高度
  min-height: calc(100vh - 61px - 220px)
}
.el-aside {
    color: #333;
    text-align: center;
}
// 布局容器结束
#record {
  min-width: 1190px;
}
.tableList {
  width: 900px;
  margin: auto;
  margin-top: 70px;
  // padding: 10px;
  // border: 1px solid red;
  h4 {
    margin-bottom: 20px;
  }
  table {
    tr {
      padding: 5px 0px;
      text-align: center;
      height: 50px;
      border-bottom: 1px solid #ccc;
      td {
        padding: 8px 0px;
        font-size: 16px;
      }
      td:first-child {
        text-align: left;
      }
      .tdImg {
        display: inline-block;
        vertical-align: top;
        width: 60px;
        height: 60px;
        margin-top: 2px;
        margin-left: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .tdText {
        margin-left: 40px;
        display: inline-block;
        text-align: left;
        p {
          max-width: 470px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 3px;
        }
      }
      p {
        margin: 3px;
      }
    }
    tr:first-child {
      td {
        text-align: center;
      }
    }
  }
}
</style>